<template>
<!-- 党建工作 -->
  <div>
     <!-- 顶部导航栏 --> 
    <van-nav-bar  :title="header"  left-arrow @click-left="$router.go(-1)"/>
    <!-- 1通知 -->
    <div class="party" @click="onNotice">
      <div class="fl party-img" >
        <em>
          <img src="../../../../assets/img/party/tongzhi.png" alt="">
        </em>
        <span>通知</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
    <!-- 2党关系转接 -->
    <div class="party" @click="onBetween">
      <div class="fl party-img">
        <em>
          <img src="../../../../assets/img/party/dangxi.png" alt="">
        </em>
        <span>党关系转接</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
    <!-- 3学习园地 -->
    <div class="party" @click="onlearning">
      <div class="fl party-img">
        <em>
          <img src="../../../../assets/img/party/xuexi.png" alt="">
        </em>
        <span>学习园地</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
    <!-- 4党建活动展示 -->
    <div class="party" @click="onHhow">
      <div class="fl party-img">
        <em>
          <img src="../../../../assets/img/party/dangjian.png" alt="">
        </em>
        <span>党建活动展示</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
    <!-- 5优秀党员风采 -->
    <div class="party" @click="onElegant">
      <div class="fl party-img">
        <em>
          <img src="../../../../assets/img/party/youxiu.png" alt="">
        </em>
        <span>优秀党员风采</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
    <!-- 6缴费通道（预留接口) -->
    <div class="party" @click="onPay">
      <div class="fl party-img">
        <em>
          <img src="../../../../assets/img/party/jiaofeitongdao.png" alt="">
        </em>
        <span>缴费通道（预留接口)</span>
      </div>
      <div class="fr ">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      id:this.$route.query.id ? this.$route.query.id : '',  // 判断页面是否存在id
      header: "党建工作",
      userId:sessionStorage.getItem('userId'),
    }
  },

  methods:{

    // 通知
    onNotice(){
      this.$router.push({path:"./partyList/onNotice",query:{id:this.id}});
    },
    // 党关系转接
    onBetween(){
      this.$router.push({path:"./partyList/partyDatails",query:{id:this.id}});
    },
    // 学习园地
    onlearning(){
      this.$router.push({path:"./partyList/onlearning",query:{id:this.id}});
    },
    // 党建活动展示
    onHhow(){
      this.$router.push({path:"./partyList/onHhow",query:{id:this.id}});
    },
    // 优秀党员风采
    onElegant(){
      this.$router.push({path:"./partyList/onElegant",query:{id:this.id}});
    },
    // 缴费通道（预留接口)
    onPay(){
      Toast("待开发")
    }
  }
}
</script>
<style scoped>
  .van-cell{
    width: 92%;
    margin: .4rem auto;
    border-radius: 4px;
    padding: 0;
    /* padding: 10px 15px; */
}
.party::after {
    overflow: hidden;
    content: "";
    display: block;
    height: 0;
    clear: both;
}
.party{
   width: 92%;
    margin: .4rem auto;
    border-radius: 5px;
    padding: 0.4rem 0.5rem;
    background-color: #ffffff;
    position: relative;
} 
.party-img em{
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}
.party-img span{
  display: inline-block;
  font-size: 0.5rem;
      font-size: 0.7rem;
    font-weight: 600;
}
/*右箭头*/
.right{
    width:20px;
    height:20px;
    position:absolute;
    right:0;
    top: 0.8rem;
}
 .right-arrow1,.right-arrow2{
  width:0;
  height:0;
  display:block;
  position:absolute;
  left:0;
  top:0;
  border-top:10px transparent dashed;
  border-right:10px transparent dashed;
  border-bottom:10px transparent dashed;
  border-left:10px white solid;
  overflow:hidden;
}
.right-arrow1{
  left:1px;/*重要*/
  border-left:10px #000000 solid;
}
.right-arrow2{
  border-left:10px white solid;
}
</style>